<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js"></script>
		<!-- 引入样式 -->
		<link rel="stylesheet" href="css/element.css">
		<!-- 引入组件库 -->
		<script src="js/element.js"></script>
		<!-- 引入网络传输库 -->
		<script src="js/axios.min.js"></script>
		<!-- 处理js对象的工具，可以对js对象进行序列化处理 -->
		<script src="js/qs.min.js"></script>
		<style>
			#app {
				width: 500px;
				height: 300px;
				position: absolute;
				margin-left: 27%;
				margin-top: 15%;
			}

			#app input {
				width: 100%;
				line-height: 50px;
			}

			body {
				background-color: #B3E19D;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<el-form :model="UserInfo" :rules="rules" status-icon ref="UserInfo" label-width="100px" class="demo-ruleForm">
				<el-form-item prop="username">
					<el-input prefix-icon="el-icon-user-solid" type="text" v-model="UserInfo.username"
						autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item prop="userpwd">
					<el-input prefix-icon="el-icon-s-goods" type="password" v-model="UserInfo.userpwd"
						autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button style="margin-left: 120px;" type="primary" @click="login()">提交</el-button>
					<el-button @click="resetForm('UserInfo')">重置</el-button>
				</el-form-item>
			</el-form>
		</div>
	</body>
	<script>
		var app = new Vue({
			el: "#app",
			data: {
				UserInfo: {
					username: "",
					userpwd: ""
				},
				 rules: {
				          username: [
				            { required: true, message: '请输入用户名', trigger: 'blur' }
							// ,
				   //          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
				          ],
						  userpwd: [
				            { required: true, message: '请输入密码', trigger: 'blur' },
				            
				          ]
						  }
			},
			methods: {
				login: function() {
					// console.log(this.UserInfo)
					// console.log("处理后的js对象：：：：")
					// console.log(Qs.stringify(this.UserInfo))
					axios.post("http://localhost:8086/login",Qs.stringify(this.UserInfo)).then(function(response) {
						console.log(response)
						if(response.data=="ok"){
							window.location.href="welcome.html"
						}else{
							// 可以写登录失败后的业务处理，如提示登录失败的提醒等
						}
					}).catch(function(err) {
						
					})
				},
				resetForm(formName) {
			 	this.$refs[formName].resetFields();
				}
			}
		})
	</script>
</html>